<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./步骤分解.css">
</head>
<body>
  <!-- 如何将div盒子体现出立体化的卡片翻面效果 -->
  <!-- div盒子是一个二维的盒子，没有厚度。如果仅仅将div的盒子翻转180度，div里面的内容仍会显现出来，并不会被遮挡住。本次实践就是将div盒子实现有正反面的效果，能够像卡片一样翻面。 -->
  <div class="box">
    <div class="pic" style="border: 3px solid rgb(248, 14, 229);">
        <img src="./images/动漫02.png" alt="" >
        <i class="light01"></i>
      </div>
      <div class="a1">
        <i class="light"></i>
      </div>
    
  </div>
</body>
</html>